<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度一下，你就知道</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    .main li{
        list-style: none;
    }
    
    .head {
        position: absolute;
        width: 700px;
    }

    .head .nav{ 
        float:left;
        padding-left: 24px;
        padding-top: 24px;
    }
    .head .nav a{
        color: #222222;
        font-size: 16px;
        margin: 19px 34px 0 0 ;
        text-decoration: none;
    }
    .head .nav a:hover{
        color: #4E6EF2;
    }

    .info_0{ 
        position: absolute;
        display: inline-block;
        right: 100px;
        padding-top: 26px;
          
    }

    .info .info_1{
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 10px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      padding: 12px 16px;
      margin-left: -10px;
    }

    .info .info_0:hover .info_1{
        display: block;
    }
    
    .info a{
        color: #222222;
        font-size: 16px;
        margin: 19px 34px 0 0 ;
        text-decoration: none;
    }

    .info a:hover {
        color:#4E6EF2;
    }

    .info .info_2{
        position: absolute;
        right: 5px;
        padding-top: 6px;
        color:#4E6EF2 ;
    }

    #logo{
         position: absolute;
         right: 800px;
         top:50px;
         max-height: 160px;
    }

    .main {
        width: 1000px;
        margin: auto;   
        text-align: center;
    }

    .main .search  {
        width: 100%;
        height: 44px;
    }

    .main .search input{    
        width: 700px;
        height: 100%;
        margin: 220px 150px 0px 0px;
        outline-color:#4E6EF2; 
        font-size: 18px;
    }
    
    #Button{
        position: absolute;
        text-align: center;
        width: 108px;
        height: 48px;
        top: 0px;
        right: 426px;
    }

    .title {
        display: block;
        width: 75px;
        height: 24px;
        margin: 50px 0px 0px 130px;
    }
    
    .title a{
        color: #000;
        font-size: 18px;
        text-decoration: none;
    }

    .title a:hover{
        color: #4E6EF2;
    }

    .hotsearch{
        width: 100%;
        line-height: 32px;
    }
    
    .hotsearch .item  {
        float: left;
        height: 32px;
        margin-left: 140px;
        margin-top: 20px; 
    }

    .hotsearch .item a{
        text-decoration: none;
        color: #222;
    }

    .hotsearch a:hover{
        color: #4E6EF2;
    }
    
</style>
<body>

    <div class="head">
        <div class="nav">
            <a href="http://news.baidu.com/" target="_blank">新闻</a>
            <a href="https://www.hao123.com/" target="_blank">hao123</a>
            <a href="https://map.baidu.com/" target="_blank">地图</a>
            <a href="https://live.baidu.com/" target="_blank">直播</a>
            <a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank">视频</a>
            <a href="https://tieba.baidu.com/index.html" target="_blank">贴吧</a>
            <a href="https://tieba.baidu.com/index.html" target="_blank">学术</a>
            <a href="https://www.baidu.com/more/" target="_blank">更多</a>
        </div>
    </div>

    <div class="info">
        <div class="info_0">
        <a href="">设置</a>
        <div class="info_1">
            <a href="">搜索设置</a>
            <a href="">高级搜索</a>
            <a href="">开启预测</a>
            <a href="">隐私设置</a>
            <a href="">关闭热榜</a>
          </div>
        </div>
        <a href="" class="info_2">登录</a>
    </div>

    <img id="logo" src="../img/baidulogo.png" alt="">
    
    <div class="main">      
        <div class="search">
            <input type="text">
                <div class="icon"></div>
            </input>
            <input  id="Button" type="text" value="百度一下" style="font-size: 20px; background-color: #4E6EF2; color: white;border: 0px;outline:none;box-shadow:none;">
        </input>
        
        <div class="title">
            <a href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry" target="_blank">百度热搜</a>
            
        </div>

        <ul class="hotsearch">  
            <li class="item"><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%B1%B1%E4%B8%9C%E8%8E%98%E5%8E%BF%E7%8E%B0%E9%BE%99%E5%8D%B7%E9%A3%8E+%E5%A4%9A%E8%BE%86%E6%B1%BD%E8%BD%A6%E8%A2%AB%E6%8E%80%E7%BF%BB&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="_blank"><span class="stit">1 山东莘县现龙卷风 多辆汽车被掀翻</span></a></li>
            <li class="item"><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%88%BA%E6%9D%80%E6%B5%B7%E5%9C%B0%E6%80%BB%E7%BB%9F%E5%AB%8C%E7%8A%AF%E5%8F%97%E9%9B%87%E4%BA%8E%E7%BE%8E%E5%9B%BD%E5%85%AC%E5%8F%B8&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="_blank"><span class="stit">4 强降雨天气十大健康提示热</span></a></li><br/>
            <li class="item"><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E8%8B%B1%E6%A0%BC%E5%85%B0%E7%90%83%E8%BF%B7%E7%BE%A4%E6%AE%B4%E6%84%8F%E5%A4%A7%E5%88%A9%E7%90%83%E8%BF%B7&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="_blank"><span class="stit">2 英格兰球迷群殴意大利球迷</span></a></li>
            <li class="item"><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E6%B2%89%E8%BF%B7%E7%BE%8E%E5%AE%B9%E7%9A%84%E5%89%AF%E6%A0%A1%E9%95%BF%E5%8C%BF%E5%90%8D%E8%AF%AC%E5%91%8A20%E4%BD%99%E6%AC%A1&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="_blank"><span class="stit">5 刺杀海地总统嫌犯受雇于美国公司</span></a></li><br/>
            <li class="item"><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%88%98%E5%BE%B7%E5%8D%8E%E7%94%B5%E5%BD%B1%E3%80%8A%E5%A4%B1%E5%AD%A4%E3%80%8B%E5%8E%9F%E5%9E%8B%E6%89%BE%E5%88%B0%E5%84%BF%E5%AD%90&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="_blank"><span class="stit">3 刘德华电影《失孤》原型找到儿子</span></a></li>
            <li class="item"><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E7%BE%8E%E8%88%B0%E6%93%85%E9%97%AF%E4%B8%AD%E5%9B%BD%E8%A5%BF%E6%B2%99+%E4%B8%AD%E6%96%B9%E8%AD%A6%E5%91%8A%E9%A9%B1%E7%A6%BB&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="_blank"><span class="stit">6 云南新增本土确诊病例9例</span></a></li>
        </ul>
        
</body>
</html>